<template>
  <div class="data-count">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="会员统计" name="first" v-if="role[0] == 'ADMIN'">
        <div class="item-top">
          <ul class="list-info">
            <li>
              <p><span>{{ headStatistics.userCount }}</span>人</p>
              <p>用户总数</p>
            </li>
            <li>
              <p><span>{{ headStatistics.memberCount }}</span>人</p>
              <p class="fix-p">私教:{{ headStatistics.privateCourseMemberCount }} / 自由练:{{ headStatistics.freeCourseMemberCount }}</p>
              <p>会员总数</p>
            </li>
            <li>
              <p><span>{{ (headStatistics.averagePayMoney/100).toFixed(2) }}</span>元</p>
              <p>会员人均消费</p>
            </li>
            <li>
              <p><span>{{ (headStatistics.sumPayMoney/100).toFixed(2) }}</span>元</p>
              <p>总营收金额</p>
            </li>
            <li>
              <p><span>{{ (headStatistics.sumUnPayMoney/100).toFixed(2) }}</span>元</p>
              <p>未完成金额</p>
            </li>
          </ul>
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <p class="map-title">会员比例</p>
            <div id="map1" class="map-item"></div>
          </el-col>
          <el-col :span="12">
            <p class="map-title">过去30日客户发展趋势</p>
            <div id="map2" class="map-item"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="课程统计" name="second">
        <div class="home-form">
          <el-form ref="ruleForm" label-width="90px" @submit.native.prevent>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="购买日期" prop="dateData">
                  <el-date-picker
                    style="width: 100%;min-width: 220px;"
                    size="mini"
                    value-format="yyyy-MM-dd"
                    v-model="dateData"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="店铺选择" prop="shop">
                  <el-select v-model="shop" placeholder="请选择" style="width:100%" clearable size="mini"  @change="changeShop">
                    <el-option
                      v-for="item in shopArr"
                      :key="item.id"
                      :label="item.storeName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="search-btn">搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row :gutter="10">
          <el-col :span="24">
            <p class="map-total">私教课程耗课数<span>{{courseUsed.used}}</span>节<em>私教课程耗课金额</em><span>{{(courseUsed.usedMoney/100).toFixed(2)}}</span>元</p>
          </el-col>
          <el-col :span="12">
            <p class="map-title">私教课程耗课比例</p>
            <div id="map3" class="map-item1"></div>
          </el-col>
          <el-col :span="12">
            <p class="map-title">教练耗课数 <span class="view-detail" @click="goDetail">查看明细</span></p>
            <div id="map4" class="map-item1"></div>
          </el-col>
          <el-col :span="12">
            <p class="map-title">教练业绩金额</p>
            <div id="map5" class="map-item1"></div>
          </el-col>
          <el-col :span="12">
            <p class="map-title">
              教练耗课金额
              <span class="view-detail" @click="goCoachCost">包时课程扣费明细</span> 
            </p>
            <div id="map6" class="map-item1"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="订单统计" name="third">
        <div class="home-form">
          <el-form ref="ruleForm" label-width="80px" @submit.native.prevent>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="购买日期" prop="dateData1">
                  <el-date-picker
                    style="width: 100%;min-width: 220px;"
                    size="mini"
                    value-format="yyyy-MM-dd"
                    v-model="dateData1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="店铺选择" prop="shop">
                  <el-select v-model="shop1" placeholder="请选择" style="width:100%" clearable size="mini">
                    <el-option
                      v-for="item in shopArr"
                      :key="item.id"
                      :label="item.storeName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch1" class="search-btn">搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row :gutter="10">
          <p class="map-data">总订单数<span>{{ totalCount }}</span>笔  总订单金额<span>{{ totalMoney }}</span>元</p>
          <el-col :span="12">
            <p class="map-title">课程类型订单金额比例</p>
            <div id="map7" class="map-item"></div>
          </el-col>
          <el-col :span="12">
            <p class="map-title">各课程订单金额比例</p>
            <div id="map8" class="map-item"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="自由练统计" >
        <dataFree></dataFree>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getByDate} from '@/util/tool'
import cvueTable from '@/components/cvue-table'
import * as echarts from 'echarts'
import dataFree from './dataFree.vue'
export default {
  name: 'data-count',
  components: {
    cvueTable,
    dataFree
  },
  data () {
    return {
      shop: '',
      selectShop: '',
      shop1: '',
      selectShop1: '',
      shopArr: [],
      dialogIndexEdit: false,
      dateData: [],
      dateData1: [],
      selectDateData: [],
      selectDateData1: [],
      activeName: 'first',
      headStatistics: {
        user_count: 0,
        risk_count: 0,
        hidden_count: 0,
        meeting_count: 0,
        effective_count: 0,
        expire_count: 0
      },
      optionMap1: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '3%',
          top: '50%'
        },
        color: ['#00d0f5', '#1a97ff', '#ffd87b', '#ff8249', '#7ecf93', '#00b67d', '#9bcbe7', '#7e87fb'],
        series: [
          {
            name: '会员比例',
            type: 'pie',
            radius: '50%',
            labelLine: {
              show: false
            },
            label: {
              formatter (params) {
                return params.percent + '%'
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      optionMap2: {
        legend: {
          show: true,
          top: '3%'
        },
        tooltip: {
          trigger: 'item',
          show: true
        },
        // color: ['#9900ff', '#ffff00', '#7ecf93'],
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: true,
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '会员',
            data: [],
            type: 'line'
          },
          {
            name: '准会员',
            data: [],
            type: 'line'
          },
          {
            name: '客户',
            data: [],
            type: 'line'
          }
        ]
      },
      optionMap3: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '15%'
        },
        color: ['#00d0f5', '#1a97ff', '#ffd87b', '#ff8249', '#7ecf93', '#00b67d', '#9bcbe7', '#7e87fb'],
        series: [
          {
            name: '私教课程消课比例',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter (params) {
                return params.percent + '%'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // { value: 1048, name: '瘦身课' }
            ]
          }
        ]
      },
      optionMap4: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#00d0f5', '#1a97ff'],
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        series: [
          {
            name: '教练耗课数按次',
            type: 'bar',
            stack: 'perTime',
            data: [],
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            },
            barWidth: 8
          },
          {
            name: '教练耗课数包时',
            type: 'bar',
            stack: 'perTime',
            data: [],
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            },
            barWidth: 8
          }
        ]
      },
      optionMap5: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#00d0f5'],
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        series: [
          {
            name: '教练业绩金额',
            type: 'bar',
            data: [],
            label: {
              show: true,
              position: 'right',
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            },
            barWidth: 8
          }
        ]
      },
      optionMap6: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#00d0f5', '#1a97ff', '#ffd87b', '#ff8249', '#7ecf93', '#00b67d', '#9bcbe7', '#7e87fb'],
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        series: [
          {
            name: '教练耗课金额按次',
            type: 'bar',
            data: [],
            barWidth: 8,
            stack: 'perTime',
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            }
          },
          {
            name: '教练耗课金额包时',
            type: 'bar',
            data: [],
            barWidth: 8,
            stack: 'perTime',
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            }
          },
          {
            name: '51前耗课金额',
            type: 'bar',
            data: [],
            barWidth: 8,
            stack: 'five',
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            }
          },
          {
            name: '51后耗课金额',
            type: 'bar',
            data: [],
            barWidth: 8,
            stack: 'five',
            label: {
              show: true,
              textBorderWidth: 0,
              color: '#000',
              fontSize: 10
            }
          }
        ]
      },
      optionMap7: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '3%',
          top: '50%'
        },
        color: ['#00d0f5', '#1a97ff', '#ffd87b', '#ff8249', '#7ecf93', '#00b67d', '#9bcbe7', '#7e87fb'],
        series: [
          {
            name: '课程类型订单金额比例',
            type: 'pie',
            radius: '50%',
            labelLine: {
              show: false
            },
            label: {
              formatter (params) {
                return params.percent + '%'
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      optionMap8: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '18%'
        },
        color: ['#00d0f5', '#1a97ff', '#ffd87b', '#ff8249', '#7ecf93', '#00b67d', '#9bcbe7', '#7e87fb'],
        series: [
          {
            name: '各课程订单金额比例',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter (params) {
                return params.percent + '%'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
      },
      pieTimer: null,
      courseUsed: {
        used: 0,
        usedMoney: 0
      },
      totalCount: 0,
      totalMoney: 0
    }
  },
  computed: {
    ...mapGetters(['token', 'userInfo', 'role'])
  },
  created () {
    this.dateData = [getByDate(0, -1), getByDate(0, 0)]
    this.selectDateData = this.dateData
    this.dateData1 = [getByDate(0, -1), getByDate(0, 0)]
    this.selectDateData1 = this.dateData1
    this.getShops()
  },
  mounted () {
  },
  methods: {
    goDetail () {
      if (!this.dateData[0]) {
        this.$message({message: '开始日期不能为空', duration: 2000, type: 'error'})
        return
      }
      if (!this.dateData[1]) {
        this.$message({message: '结束日期不能为空', duration: 2000, type: 'error'})
        return
      }
      this.$router.push({
        path: '/home/data-count-detail', 
        query: {
          start: this.dateData[0],
          end: this.dateData[1],
          storeId: this.shop
        }
      })
    },
    goCoachCost () {
      if (!this.dateData[0]) {
        this.$message({message: '开始日期不能为空', duration: 2000, type: 'error'})
        return
      }
      if (!this.dateData[1]) {
        this.$message({message: '结束日期不能为空', duration: 2000, type: 'error'})
        return
      }
      this.$router.push({
        path: '/home/data-count-cost-detail', 
        query: {
          start: this.dateData[0],
          end: this.dateData[1],
          storeId: this.shop
        }
      })
    },
    changeShop (val) {

    },
    // 获取店铺
    getShops () {
      this.$store.dispatch('manage/StoreListMy', '').then(res => {
        if (res.code == '200') {
          var data = res.data
          this.shopArr = data
          if (this.role[0] == 'ADMIN') {
            this.shopArr = [{storeName: '全部', id: ''}].concat(this.shopArr)
          }
          this.shop = this.shopArr[0].id
          this.shop1 = this.shopArr[0].id
          this.selectShop = this.shop
          this.selectShop1 = this.shop1
          if (this.role[0] == 'ADMIN') {
            this.activeName = 'first'
            // 会员统计
            this.getUserStatistic()
            // 用户发展趋势
            this.getUserTrends()
          } else {
            this.activeName = 'second'
          }
          // 私教课程消耗统计
          this.getUserSignCourseUsedStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
          // 私教课程耗课比例
          this.getSignCourseUsedRatioStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
          // 教练耗课数
          this.getStatisticGroupByCoachUserIdAndSaleMode(this.selectDateData[0], this.selectDateData[1], this.selectShop)
          // 教练业绩金额
          this.getCoachSignStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
          // 教练耗课金额
          this.getCoachSignCourseUsedStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)

          // 订单类型统计
          this.getSignCourseTypeAndMoneyStatistic(this.selectDateData1[0], this.selectDateData1[1], this.selectShop1)
          // 课程订单金额
          this.getSignCourseNameAndMoneyStatistic(this.selectDateData1[0], this.selectDateData1[1], this.selectShop1)
        }
      })
    },
    initMaper1 (data) {
      let self = this
      if (!self.map1) {
        self.map1 = echarts.init(document.getElementById('map1'))
      }
      this.optionMap1.series[0].data = data
      self.map1.setOption(this.optionMap1)

      let currentIndex = -1
      var dataLen = self.optionMap1.series[0].data.length
      // if (this.pieTimer) {
      //   clearInterval(this.pieTimer)
      // }
      // this.pieTimer = setInterval(() => {
      //   self.map1.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      //   currentIndex = (currentIndex + 1) % dataLen
      //   self.map1.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      //   self.map1.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      // }, 2000)
    },
    initMaper2 (xData, yData1, yData2, yData3) {
      let self = this
      if (!self.map2) {
        self.map2 = echarts.init(document.getElementById('map2'))
      }
      this.optionMap2.series[0].data = yData1
      this.optionMap2.series[1].data = yData2
      this.optionMap2.series[2].data = yData3
      this.optionMap2.xAxis.data = xData
      self.map2.setOption(this.optionMap2)
    },
    initMaper3 (yData1) {
      let self = this
      if (!self.map3) {
        self.map3 = echarts.init(document.getElementById('map3'))
      }
      this.optionMap3.series[0].data = yData1
      self.map3.setOption(this.optionMap3)
    },
    initMaper4 (yData, xData1, xData2) {
      let self = this
      if (!self.map4) {
        self.map4 = echarts.init(document.getElementById('map4'))
      }
      this.optionMap4.yAxis.data = yData
      this.optionMap4.series[0].data = xData1
      this.optionMap4.series[1].data = xData2
      self.map4.setOption(this.optionMap4)
    },
    initMaper5 (xData, yData) {
      let self = this
      if (!self.map5) {
        self.map5 = echarts.init(document.getElementById('map5'))
      }
      this.optionMap5.series[0].data = xData
      this.optionMap5.yAxis.data = yData
      self.map5.setOption(this.optionMap5)
    },
    initMaper6 (yData, xData1, xData2, xData3, xData4) {
      let self = this
      if (!self.map6) {
        self.map6 = echarts.init(document.getElementById('map6'))
      }
      this.optionMap6.yAxis.data = yData
      this.optionMap6.series[0].data = xData1
      this.optionMap6.series[1].data = xData2
      this.optionMap6.series[2].data = xData3
      this.optionMap6.series[3].data = xData4
      self.map6.setOption(this.optionMap6)
    },
    initMaper7 (yData1) {
      let self = this
      if (!self.map7) {
        self.map7 = echarts.init(document.getElementById('map7'))
      }
      this.optionMap7.series[0].data = yData1
      self.map7.setOption(this.optionMap7)
    },
    initMaper8 (yData1) {
      let self = this
      if (!self.map8) {
        self.map8 = echarts.init(document.getElementById('map8'))
      }
      this.optionMap8.series[0].data = yData1
      self.map8.setOption(this.optionMap8)
    },
    handleClick () {
    },
    handleResetForm () {
      this.$refs['ruleForm'].resetFields()
    },
    // 新增
    handleAdd () {
      this.actionType = 'add'
      // this.dialogIndexEdit = true
      this.$router.push('/home/course-data-edit')
    },
    // 会员统计
    getUserStatistic () {
      this.tableLoading = true
      var params = {}
      this.$store.dispatch('manage/UserStatistic', params).then(res => {
        var data = res.data
        // console.log(data)
        this.headStatistics = data
        this.tableLoading = false
        var memberData = [
          { value: data.userCount - data.memberCount, name: '准会员' },
          { value: data.memberCount, name: '会员' }
        ]
        this.initMaper1(memberData)
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 用户发展趋势
    getUserTrends () {
      this.tableLoading = true
      var params = {}
      this.$store.dispatch('manage/UserTrends', params).then(res => {
        var data = res.data
        // console.log(data)
        var xData = []
        var yData1 = []
        var yData2 = []
        var yData3 = []
        data.forEach((item, index) => {
          xData.push(item.statisticDate)
          yData1.push(item.memberUserCount)
          yData2.push(item.prepareMemberUserCount)
          yData3.push(item.userCount)
        })
        this.initMaper2(xData, yData1, yData2, yData3)
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 私教课程消耗统计 空指针
    getUserSignCourseUsedStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/SignCourseUsedStatistic', params).then(res => {
        // console.log(res)
        var data = res.data ? res.data : {
          used: 0,
          usedMoney: 0
        }
        // console.log(data)
        this.courseUsed = data
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 私教课程消耗比例
    getSignCourseUsedRatioStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/SignCourseUsedRatioStatistic', params).then(res => {
        var data = res.data 
        // console.log(data)
        var yData1 = data.map((item, index) => {
          return {
            value: item.count,
            name: item.courseName
          }
        })
        this.initMaper3(yData1)
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 订单类型统计
    getSignCourseTypeAndMoneyStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/SignCourseTypeAndMoneyStatistic', params).then(res => {
        var data = res.data 
        // console.log(data) 
        if (data && data.length > 0) {
          this.totalCount = parseInt(data[0].count) + (data[1] ? parseInt(data[1].count) : 0)
          this.totalMoney = ((parseInt(data[0].sumMoney) + (data[1] ? parseInt(data[1].sumMoney) : 0)) / 100).toFixed(2)
          var yData1 = [
            { value: ((parseInt(data[0].sumMoney)) / 100).toFixed(2), name: data[0].courseType === 1 ? '私教课' : '自由练' },
            { value: ((data[1] ? parseInt(data[1].sumMoney) : 0) / 100).toFixed(2), name: data[0].courseType === 1 ? '自由练' : '私教课' }
          ]
          this.initMaper7(yData1)
        } else {
          this.totalCount = 0
          this.totalMoney = '0.00'
          this.initMaper7([])
        }
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 课程订单金额
    getSignCourseNameAndMoneyStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/SignCourseNameAndMoneyStatistic', params).then(res => {
        if (res.code == 200 && res.data) {
          var data = res.data 
          // console.log(data)
          var yData1 = data.map((item, index) => {
            return {
              name: item.courseName,
              value: (item.sumMoney / 100).toFixed(2)
            }
          })
          this.initMaper8(yData1)
        }
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 教练耗课数
    getStatisticGroupByCoachUserIdAndSaleMode (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/StatisticGroupByCoachUserIdAndSaleMode', params).then(res => {
        if (res.code == 200 && res.data) {
          var data = res.data 
          // console.log(data)
          var yData = []
          var xData1 = []
          var xData2 = []
          data.forEach((item, index) => {
            yData.push(item.userName)
            xData1.push(parseInt(item.secondCount))
            xData2.push(parseInt(item.timesCount))
          })
          this.initMaper4(yData, xData1, xData2)
        }
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 教练业绩金额
    getCoachSignStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/CoachSignStatistic', params).then(res => {
        if (res.code == 200 && res.data) {
          var data = res.data 
          // console.log(data)
          var xData = []
          var yData = []
          data.forEach((item, index) => {
            xData.push((parseInt(item.money) / 100).toFixed(2))
            yData.push(item.userName)
          })
          this.initMaper5(xData, yData)
        }
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 教练耗课金额
    getCoachSignCourseUsedStatistic (start, end, storeId) {
      this.tableLoading = true
      var params = {
        'end': end ? end + '' : '',
        'start': start ? start + '' : '',
        'storeId': storeId
      }
      this.$store.dispatch('manage/CoachSignCourseUsedStatistic', params).then(res => {
        if (res.code == 200 && res.data) {
          var data = res.data 
          // console.log(data)
          var yData = []
          var xData1 = []
          var xData2 = []
          var xData3 = []
          var xData4 = []
          data.forEach((item, index) => {
            yData.push(item.userName)
            xData1.push((parseInt(item.secondMoney) / 100).toFixed(2))
            xData2.push((parseInt(item.timesMoney) / 100).toFixed(2))
            xData3.push((parseInt(item.before51) / 100).toFixed(2))
            xData4.push((parseInt(item.after51) / 100).toFixed(2))
          })
          this.initMaper6(yData, xData1, xData2, xData3, xData4) 
        }
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.selectDateData = this.dateData ? this.dateData : ['', '']
      this.selectShop = this.shop
      if (!this.selectDateData[0]) {
        this.$message({message: '开始日期不能为空', duration: 2000, type: 'error'})
        return
      }
      if (!this.selectDateData[1]) {
        this.$message({message: '结束日期不能为空', duration: 2000, type: 'error'})
        return
      }
      this.getUserSignCourseUsedStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
      this.getSignCourseUsedRatioStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
      // 教练耗课数
      this.getStatisticGroupByCoachUserIdAndSaleMode(this.selectDateData[0], this.selectDateData[1], this.selectShop)
      // 教练业绩金额
      this.getCoachSignStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
      // 教练耗课金额
      this.getCoachSignCourseUsedStatistic(this.selectDateData[0], this.selectDateData[1], this.selectShop)
    },
    handleSearch1 () {
      this.selectDateData1 = this.dateData1 ? this.dateData1 : ['', '']
      this.selectShop1 = this.shop1
      if (!this.selectDateData1[0]) {
        this.$message({message: '开始日期不能为空', duration: 2000, type: 'error'})
        return
      }
      if (!this.selectDateData1[1]) {
        this.$message({message: '结束日期不能为空', duration: 2000, type: 'error'})
        return
      }
      // 订单类型统计
      this.getSignCourseTypeAndMoneyStatistic(this.selectDateData1[0], this.selectDateData1[1], this.selectShop1)
      // 课程订单金额
      this.getSignCourseNameAndMoneyStatistic(this.selectDateData1[0], this.selectDateData1[1], this.selectShop1)
    },
    // 关闭弹窗
    closeDialog (params) {
      if (params == 'edit') {
        this.dialogIndexEdit = false
      }
    },
    // 确认
    confirmDialog (params) {
      if (params == 'edit') {
        this.dialogIndexEdit = false
      }
    }
  }
}
</script>

<style lang="scss">
.data-count {
  padding: 10px !important;
  height: auto !important;
  background: #fff;
  min-width: 1180px;
  overflow: auto;
  .view-detail{
    font-size: 13px;
    color: #409EFF;
    cursor: pointer;
    margin-left: 20px;
  }
  .btn-list {
    float: right;
    margin-right: 10px;
    font-size: 12px;
    color: #409EFF;
    cursor: pointer;
  }
  .el-card__header {
    border-bottom: none;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .fix-lh {
    line-height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  .left{
    min-height:500px;
    background:#fff;
  }
  .left-tree{
    width: 100%;
    min-height:600px;
    overflow: auto;
  }
  .left-top{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    background: #e2e2e2;
    font-size: 15px;
  }
  .item-top {
    width: 100%;
    height:100px;
    color: #000;
    .list-info {
      height: 100%;
      overflow: hidden;
    }
    .list-info li {
      width: 18%;
      height: 100%;
      margin-right: 1%;
      text-align: center;
      display: inline-block;
      background: #eee;
      line-height: 38px;
      font-size: 14px;
      float: left;
      padding: 10px 0;
      box-sizing: border-box;
      span {
        font-size: 15px;
        color: #6acff9;
        margin: 0 5px;
      }
      .fix-p{
        height: 12px;
        line-height: 12px;
        color: #aaa;
        margin-top: -9px;
        font-size: 12px;
      }
    }

    .list-info li:first-child {
      width: 21%;
    }

    .list-info li:last-child {
      margin-right: 0;
      width: 21%;
    }
  }
  .map-title{
    line-height: 40px;
    margin-top: 20px;
    font-size: 15px;
    text-indent: 20px;
  }
  .map-total{
    text-align: left;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 20px;
    span{
      font-size: 20px;
      font-weight: bold;
      margin: 0 10px;
    }
    em{
      margin-left: 100px;
    }
  }
  .map-data{
    line-height: 40px;
    margin-top: 20px;
    font-size: 15px;
    text-indent: 20px;
    margin-bottom: -20px;
    span{
      font-size: 20px;
      font-weight: bold;
      margin: 0 10px;
    }
  }
  .map-item{
    width: calc(50vw - 145px);
    height: calc(100vh - 370px);
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .map-item1{
    width: calc(50vw - 180px);
    height: calc(50vh - 50px);
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
@media (max-width: 1400px) {
  .map-item{
    width: 570px !important;
    height: 380px !important;
  }
  .map-item1{
    width: 534px !important;
    height: 325px !important;
  }
}
</style>
